<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-preview-main">
      <!-- 头部 -->
      <div class="JNPF-common-page-header">
        <div class="headerBox">
          <div class="headerBox-top">
            <div class="icon-header-box icon-orange"><i class="iconfont zgyf-icon-leijishoufei box-icon "></i></div>
            <div class="icon-header-text">已缴会费（元）</div>
          </div>
          <div class="headerBox-bottom">{{headerData.paidDues}}</div>
        </div>
        <div class="headerBox">
          <div class="headerBox-top">
            <div class="icon-header-box icon-blue"><i class="iconfont zgyf-icon-gongyingfabu box-icon "></i></div>
            <div class="icon-header-text">发布三方服务（个）</div>
          </div>
          <div class="headerBox-bottom">{{headerData.thirdParty}}</div>
        </div>
        <div class="headerBox">
          <div class="headerBox-top">
            <div class="icon-header">
              <div class="icon-header-box icon-green"><i class="iconfont zgyf-icon-shangpinshuliang box-icon "></i></div>
            </div>
            <div class="icon-header-text">商品数量（个）</div>
          </div>
          <div class="headerBox-bottom">{{headerData.commodity}}</div>
        </div>
        <div class="headerBox">
          <div class="headerBox-top">
            <div class="icon-header-box icon-blue"><i class="iconfont zgyf-icon-gongyingfabuliang box-icon "></i></div>
            <div class="icon-header-text">供应发布量（个）</div>
          </div>
          <div class="headerBox-bottom">{{headerData.supplyRelease}}</div>
        </div>
        <div class="headerBox">
          <div class="headerBox-top">
            <div class="icon-header-box icon-orange"><i class="iconfont zgyf-icon-xuqiufabuliang box-icon "></i></div>
            <div class="icon-header-text">需求发布量（个）</div>
          </div>
          <div class="headerBox-bottom">{{headerData.demandRelease}}</div>
        </div>
      </div>
      <!-- 中部 -->
      <div class="JNPF-common-page-main">
        <!-- 通知消息 -->
        <div class="mainBox">
          <div class="mainBox-top">
            <div class="mainBox-top-left">通知消息</div>
            <div class="mainBox-top-right" @click="goToLink('/messageRecord')">全部<i class="icon-ym icon-ym-report-icon-preview-pageNext"></i></div>
          </div>
          <div class="mainBox-bottom table-box">
            <el-table :data="tableData" border :height="230">
              <el-table-column prop="title" label="标题" width="180" show-overflow-tooltip />
              <el-table-column prop="description" label="消息内容" min-width="180" show-overflow-tooltip />
              <el-table-column prop="releaseTime" label="时间" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{scope.row.releaseTime | toDate() }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 快捷入口 -->
        <div class="mainBox">
          <div class="mainBox-top">
            <div class="mainBox-top-left">快捷入口</div>
          </div>
          <div class="mainBox-bottom">
            <div class="box">
              <div class="icon-header-box icon-orange"><i class="iconfont zgyf-icon-leijishoufei box-icon "></i></div>
              <div class="mainBox-btns"><div class="mainBox-btn" @click="goToLink('/asso/vip/vipAmount')">快速缴费</div></div>
            </div>
            <div class="box">
              <div class="icon-header-box icon-green"><i class="iconfont zgyf-icon-shangpinshuliang box-icon "></i></div>
              <div class="mainBox-btns"><div class="mainBox-btn" @click="goToLink('/vip/goods/list')">商品发布</div></div>
            </div>
            <div class="box">
              <div class="icon-header-box icon-blue"><i class="iconfont zgyf-icon-gongyingfabuliang box-icon "></i></div>
              <div class="mainBox-btns"><div class="mainBox-btn" @click="goToLink('/vip/supply/list')">供需发布</div></div>
            </div>
            <div class="box">
              <div class="icon-header-box icon-orange"><i class="iconfont zgyf-icon-fuwushangruzhu box-icon "></i></div>
              <div class="mainBox-btns"><div class="mainBox-btn" @click="goToLink('/vip/service/list')">服务商入驻</div></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 尾部 -->
      <div class="JNPF-common-page-footer">
        <div class="footerBox">
          <div class="footerBox-top">
            <div class="footerBox-top-title">缴费情况</div>
          </div>
          <div class="footerBox-bottom" >
            <el-table :data="tableData1" border style="width: 100%" :height="220">
              <el-table-column prop="title" label="订单标题" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="assoCitationName" label="协会名称" min-width="300" show-overflow-tooltip/>
              <el-table-column prop="amount" label="订单金额" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="status" label="审批状态" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="creatorTime" label="创建时间" min-width="200" show-overflow-tooltip/>
            </el-table>
            <pagination :total="total" :page.sync="query.currentPage" :limit.sync="query.pageSize"
              @pagination="GetVipOrderRecord" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { GetHeadInfo, GetVipOrderRecord } from '@/api/vip/vip'
  import { getMessageList } from '@/api/system/message'
  export default {
    data() {
      return {
        tableData: [],
        tableData1: [],
        query:{
          dataType: 0,
          currentPage: 1,
          pageSize: 5
        },
        listQuery: {
          currentPage: 1,
          pageSize: 4,
        },
        total: 0,
        headerData: {
          paidDues: 0,
          thirdParty: 0,
          commodity: 0,
          supplyRelease: 0,
          demandRelease: 0
        },
        vipId: this.$store.state.user.userInfo.userId
      }
    },
    created() {
      this.GetHeadInfo()
      this.GetVipOrderRecord()
      // 通知消息
      this.getMessageList()
    },
    methods: {
      GetHeadInfo() {
        GetHeadInfo(this.vipId).then(res => {
          if (res.code === 200) {
            console.log("*****",res.data)
            if (id === 0) {
              this.headerData.paidDues = res.data.paidDues
            } else {
              this.headerData = res.data
            }
          }
        })
      },
      GetVipOrderRecord() {
        GetVipOrderRecord(this.vipId, this.query).then(res => {
          if (res.code === 200) {
            this.tableData1 = res.data.list
          }
        })
      },
      // 通知消息
      getMessageList() {
        getMessageList(this.listQuery).then(res =>{
          if(res.data && res.data.list){
            this.tableData = res.data.list
          }
          this.listLoading = false
        })
      },
      goToLink(url) {
        this.$router.push(url)
      }
    }
  }

</script>
<style scoped lang="scss">
  .JNPF-common-layout{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .JNPF-preview-main {
    width: 100%;
    height: 100%;
    background: #EEEEEE;
    .JNPF-common-page-header {
      display: flex;
      justify-content: space-between;
      width: 100%;
      background: #FFFFFF;
      padding: 0.75rem;
      border-radius: 0.25rem;
      margin-bottom: 0.75rem;
      .headerBox {
        width: calc(20% - 0.75rem);
        background: #FFFFFF;
        border: 1px solid #E7E7E7;
        border-radius: 0.75rem;
        .headerBox-top {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #E7E7E7;
          padding: 1rem;
          .icon-header-box{
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 2.5rem;
            height: 2.5rem;
            padding: 16px;
            border-radius: 100%;
            margin-right: 1.125rem;
          }
          .icon-header-text{
            flex: 1;
            font-weight: bold;
            font-size: 1.25rem;
            line-height: 1.75rem;
            color: rgba(0, 0, 0, 0.60);
          }
          .box-icon {
            font-size: 1.5rem;
            color: #ffffff
          }
          .icon-orange {
            background-color:#ED7B2F ;
          }
          .icon-blue {
            background-color: #0052D9;
          }
          .icon-green {
            background-color: #00A870;
          }
        }
        .headerBox-bottom {
          width: 100%;
          padding: 1.5rem 0;
          font-size: 3rem;
          line-height: 3.5rem;
          color: rgba(0, 0, 0, 0.90);
          text-align: center;
        }
      }
    }
    ::v-deep .el-table--border{
      border-bottom: 1px solid #EBEEF5;
    }
    .JNPF-common-page-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 0.75rem;
      .mainBox {
        width: 50%;
        height: 100%;
        background: #FFFFFF;
        border-radius: 0.25rem;
        margin-right: 0.75rem;
        &:nth-child(2) {
          margin-right: 0;
        }
        .mainBox-top {
          display: flex;
          align-items: center;
          width: 100%;
          font-size: 1rem;
          line-height: 1.5rem;
          font-weight: bold;
          color: rgba(0,0,0,0.90);
          border-bottom: 1px solid #E7E7E7;
          padding: 1rem 0.75rem;
          .mainBox-top-left {
            flex: 1;
          }
          .mainBox-top-right {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            cursor: pointer;
            color: #0052D9;
            i{
              font-size: 0.875rem;
              margin-left: 0.5rem;
            }
          }
        }
        .mainBox-bottom {
          width: 100%;
          height: calc(100% - 3.5rem);
          padding: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          &.table-box{
            align-items: unset;
          }
          .box{
            width: 25%;
            text-align: center;
            .icon-header-box{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 40px;
              height: 40px;
              border-radius: 100%;
              margin: 0 auto;
            }
            .mainBox-btns{
              margin-top: 1.25rem;
              width: 100%;
              text-align: center;
              .mainBox-btn{
                display: inline-block;
                font-size: 0.875rem;
                line-height: 1.375rem;
                padding: 0.3125rem 1rem;
                color: #fff;
                background: #0052D9;
                border-radius: 0.25rem;
                cursor: pointer;
              }
            }
            .box-icon {
              font-size: 1.5rem;
              color: #ffffff
            }
            .icon-orange {
              background-color:#ED7B2F ;
            }
            .icon-blue {
              background-color: #0052D9;
            }
            .icon-green {
              background-color: #00A870;
            }
          }
        }
      }
    }
    .JNPF-common-page-footer {
      width: 100%;
      background: #FFFFFF;
      border-radius: 4px;
      .footerBox{
        width: 100%;
        background: #FFFFFF;
        border-radius: 4px;
        .footerBox-top{
          width: 100%;
          padding: 1rem 0.75rem;
          border-bottom: 1px solid #E7E7E7;
        }
        .footerBox-bottom{
          width: 100%;
          padding: 0.75rem;
        }
      }
    }
  }
</style>
